<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="my-co
        <div class="photo-wrap">
            <!-- 舞台 -->
            <div class="container">
                <!-- 相册容器 -->
                <div class="img img01"><img src="./imgs/20200203190150.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img02"><img src="./imgs/微信图片_20200203194122.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img03"><img src="./imgs/微信图片_20200203194131.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img04"><img src="./imgs/微信图片_20200203194147.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img05"><img src="./imgs/微信图片_20200203194154.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img06"><img src="./imgs/微信图片_20200203194202.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img07"><img src="./imgs/微信图片_20200203194223.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img08"><img src="./imgs/微信图片_20200203194237.jpg" style="width: 200px; height: 300px;"></div>
                <div class="img img09"><img src="./imgs/微信图片_20200203194302.jpg" style="width: 200px; height: 300px;"></div>
            </div>
        </div>
    </div>
</body>
<style>
    .my-container {
        width: 800px;
        height: 500px;
        margin: 20px auto;
    }

    .photo-wrap {
        perspective: 800px;
        width: 800px;
    }

    .container {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
        animation: rotateY360 15s ease-in-out infinite;
    }

    .img {
        width: 200px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        position: absolute;
        top: 160px;
        left: 300px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
        background: pink;
    }

    .img01 {
        transform: rotateY(0deg);
    }

    .img02 {
        transform: rotateY(40deg);
    }

    .img03 {
        transform: rotateY(80deg);
    }

    .img04 {
        transform: rotateY(120deg);
    }

    .img05 {
        transform: rotateY(160deg);
    }

    .img06 {
        transform: rotateY(200deg);
    }

    .img07 {
        transform: rotateY(240deg);
    }

    .img08 {
        transform: rotateY(280deg);
    }

    .img09 {
        transform: rotateY(320deg);
    }

    .img01 {
        transform: rotateY(0deg) translateZ(300px);
    }

    .img02 {
        transform: rotateY(40deg) translateZ(300px);
    }

    .img03 {
        transform: rotateY(80deg) translateZ(300px);
    }

    .img04 {
        transform: rotateY(120deg) translateZ(300px);
    }

    .img05 {
        transform: rotateY(160deg) translateZ(300px);
    }

    .img06 {
        transform: rotateY(200deg) translateZ(300px);
    }

    .img07 {
        transform: rotateY(240deg) translateZ(300px);
    }

    .img08 {
        transform: rotateY(280deg) translateZ(300px);
    }

    .img09 {
        transform: rotateY(320deg) translateZ(300px);
    }

    @keyframes rotateY360 {
        from {
            transform: rotateY(0deg);
        }

        to {
            transform: rotateY(360deg);
        }
        
    }
   
</style>
<script>

</script>

</html>